<template>
  <!-- 侧边菜单 -->
  <div>
    <div class="menu">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        router
        :collapse="isCollapse"
      >
        <el-menu-item index="/" class="homePage">
          <i class="iconfont" style="margin: 0 8px 0 0;">&#xe63a;</i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item v-for="item of MenuList" :key="item.id" :index="item.index">
          <i class="iconfont" :class="item.icon" style="margin: 0 8px 0 0;"></i>
          <span slot="title">{{ item.content }}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      isCollapse: false,
      MenuList: [{
        index: '/echart',
        content: '图例',
        icon: 'icon-shujudaoru'
      }, {
        index: '/steps',
        content: '步骤条',
        icon: 'icon-fenzi'
      }, {
        index: '/quill-editor',
        content: '富文本',
        icon: 'icon-fenzi'
      }, {
        index: '/tableList',
        content: '表格',
        icon: 'icon-caiyang'
      }, {
        index: '/relationEchart',
        content: '关系图',
        icon: 'icon-shujudaoru'
      }, {
        index: '/personEchart',
        content: '人员图',
        icon: 'icon-yonghuguanli'
      }, {
        index: '/commonEchart',
        content: '通用图表',
        icon: 'icon-caiyang'
      }, {
        index: '/adaptive',
        content: '自适应',
        icon: 'icon-qiye'
      }, {
        index: '/imgWatermark',
        content: '图片水印预览',
        icon: 'icon-xiangqing'
      }, {
        index: '/excel',
        content: 'excel表格显示',
        icon: 'icon-xiangqing'
      }, {
        index: '/canvas',
        content: 'canvas标注',
        icon: 'icon-xiangqing'
      }
      ]
    }
  },
  created() {
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>
.menu{
  width: 240px;
  height: 100%;
}
.el-menu{
  height: 100%;
}
</style>
